{extend name="public:single" /}
{block name="title"}开发友社区{/block}
{block name="container"}
<style>
    ol.linenums {
        margin-left: 25px !important;
    }
</style>
<link href="/static/back/plugins/misc/prettify/prettify.css" type="text/css" rel="stylesheet" />

<!--container-->
<section id="container">
    <div class="container">
        <div class="row">
            <section id="page-sidebar" class="alignrleft span8">

                <article class="blog-post">
                    <div class="row">
                        <div class="span8">
                            <h3 class="post-title"><a href="{:url('index/Index/article', ['id'=>$article['id']])}">{$article.title}</a></h3>

                            <ul class="post-meta">
                                <li>
                                    <i class="icon-calendar"></i>
                                    <a href="javascript:void(0);">{$article.updated_at|strtotime|date='Y年m月d日',###}</a>
                                </li>
                                <li>
                                    <i class="icon-user"></i>
                                    <a href="/blog_{$article.user.id}_0_0.html">{$article.user.nickname}</a>
                                </li>
                                <li>
                                    <i class="icon-list-alt"></i>
                                    {volist name="$article.categories" id="vo_cat"}
                                    {$i == 1 ? '': ','}
                                    <a href="/blog_0_{$vo_cat.category.id}_0.html" title="{$vo_cat.category.intro}" rel="category tag" style="color:#b77a2b;">{$vo_cat.category.name}</a>
                                    {/volist}
                                </li>
                                <!--<li><i class="icon-tag"></i> <a href="#">CSS3</a> <a href="#">HTML5</a> <a href="#">Responsive</a></li>-->
                                <li>
                                    <i class="icon-comment"></i>
                                    <a href="#comments">{:count($article['comments'])}个评论</a>
                                </li>
                            </ul>

                            <div class="post-media">
                                {if condition='$article.image AND $article.image.type neq 3'}
                                <img src="{$article.image.url}" alt="{$article.title}" />
                                {/if}
                            </div>

                            <div class="post-content">
                                {$article.html_content}
                            </div>

                        </div>

                    </div>
                </article>

                <p class="tags">
                    {volist name="article.tags" id="vo"}

                    <a href="/blog_0_0_{$vo.tag.id}.html" rel="tag"><i class="icon-tag icon-white"></i>{$vo.tag.name}</a>
                    {/volist}
                </p>

                <hr />

                <!--comments-->
                <h3 id="comments">{:count($article['comments'])}个评论</h3>
                <div class="comments">
                    <ul class="comments-list" id="comments-show" data-url="{:url('index/Index/comment', ['id'=>$article['id']])}">

                    </ul>
                </div>

                <hr />

                <!--commetns form-->
                <h3>说点什么</h3>
                <form name="comment" method="post" action="" class="af-form" id="af-form" />
                <div class="row">
                    <div class="span4">
                        <div class="af-outer af-required">
                            <div class="af-inner">
                                <label for="name" id="name_label">昵称:</label>
                                <input type="text" name="name" id="name" size="30" value="" class="text-input span4" />
                                <label class="error" for="name" id="name_error">昵称不能为空！</label>
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="af-outer af-required">
                            <div class="af-inner">
                                <label for="email" id="email_label">邮箱:</label>
                                <input type="text" name="email" id="email" size="30" value="" class="text-input span4" />
                                <label class="error" for="email" id="email_error">邮箱不能为空！</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="af-outer af-required">
                    <div class="af-inner">
                        <label for="input-message" id="message_label">评论内容:</label>
                        <textarea name="message" id="input-message" cols="30" class="text-input span8"></textarea>
                        <label class="error" for="input-message" id="message_error">评论内容不能为空！</label>
                    </div>
                </div>
                <div class="af-outer af-required">
                    <div class="af-inner">
                        <input type="submit" name="submit" class="form-button btn btn-large btn-welcome" id="submit_btn" value="发表" />
                    </div>
                </div>
                </form>
            </section>
            <!--sidebar-->
            {include file="public/_sidebar" /}
        </div>
    </div>
</section>

<script type="text/javascript" src="/static/back/plugins/misc/prettify/prettify.js"></script>
<script type="text/javascript">
    function comments() {
        jQuery.ajax({
            type:"GET",
            url:jQuery('#comments-show').data('url'),
            success:function (response) {
                jQuery('#comments-show').html(response);
            }
        });
    }
</script>

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('pre').addClass('prettyprint linenums');
        prettyPrint(); //google prettify
        comments();
    });
</script>
{/block}